<template>
  <div class="box container">
    <div class="top-title row col-xl-12">
      <h2>品牌产品</h2>
      <p>查看更多...</p>
    </div>
    <!-- <div class="produce-box"> -->
    <ul class="ul-box row justify-content-between">
      <li class="col-12 col-xl-2">
        <img src="/images/sxdami.png" alt="" />
        <img src="/images/hide.png" class="hide" alt="" />
        <div class="goods-box">
          <div class="goods-info">
            <span>
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="16"
                height="16"
                fill="currentColor"
                class="bi bi-cart3"
                viewBox="1 1 16 16">
                <path
                  d="M0 1.5A.5.5 0 0 1 .5 1H2a.5.5 0 0 1 .485.379L2.89 3H14.5a.5.5 0 0 1 .49.598l-1 5a.5.5 0 0 1-.465.401l-9.397.472L4.415 11H13a.5.5 0 0 1 0 1H4a.5.5 0 0 1-.491-.408L2.01 3.607 1.61 2H.5a.5.5 0 0 1-.5-.5zM3.102 4l.84 4.479 9.144-.459L13.89 4H3.102zM5 12a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm7 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm-7 1a1 1 0 1 1 0 2 1 1 0 0 1 0-2zm7 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2z" />
              </svg>
              寿州大米
            </span>
            <button>查看详情</button>
          </div>
          <div class="price">市场价：¥19.9</div>
          <div>
            价格：
            <span style="color: red">¥9.9</span>
          </div>
        </div>
      </li>

      <li class="col-12 col-xl-2">
        <img src="/images/sxdami.png" alt="" />
        <img src="/images/hide.png" class="hide" alt="" />
        <div class="goods-box">
          <div class="goods-info">
            <span>
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="16"
                height="16"
                fill="currentColor"
                class="bi bi-cart3"
                viewBox="1 1 16 16">
                <path
                  d="M0 1.5A.5.5 0 0 1 .5 1H2a.5.5 0 0 1 .485.379L2.89 3H14.5a.5.5 0 0 1 .49.598l-1 5a.5.5 0 0 1-.465.401l-9.397.472L4.415 11H13a.5.5 0 0 1 0 1H4a.5.5 0 0 1-.491-.408L2.01 3.607 1.61 2H.5a.5.5 0 0 1-.5-.5zM3.102 4l.84 4.479 9.144-.459L13.89 4H3.102zM5 12a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm7 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm-7 1a1 1 0 1 1 0 2 1 1 0 0 1 0-2zm7 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2z" />
              </svg>
              寿州大米
            </span>
            <button>查看详情</button>
          </div>
          <div class="price">市场价：¥19.9</div>
          <div>
            价格：
            <span style="color: red">¥9.9</span>
          </div>
        </div>
      </li>

      <li class="col-12 col-xl-2">
        <img src="/images/sxdami.png" alt="" />
        <img src="/images/hide.png" class="hide" alt="" />
        <div class="goods-box">
          <div class="goods-info">
            <span>
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="16"
                height="16"
                fill="currentColor"
                class="bi bi-cart3"
                viewBox="1 1 16 16">
                <path
                  d="M0 1.5A.5.5 0 0 1 .5 1H2a.5.5 0 0 1 .485.379L2.89 3H14.5a.5.5 0 0 1 .49.598l-1 5a.5.5 0 0 1-.465.401l-9.397.472L4.415 11H13a.5.5 0 0 1 0 1H4a.5.5 0 0 1-.491-.408L2.01 3.607 1.61 2H.5a.5.5 0 0 1-.5-.5zM3.102 4l.84 4.479 9.144-.459L13.89 4H3.102zM5 12a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm7 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm-7 1a1 1 0 1 1 0 2 1 1 0 0 1 0-2zm7 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2z" />
              </svg>
              寿州大米
            </span>
            <button>查看详情</button>
          </div>
          <div class="price">市场价：¥19.9</div>
          <div>
            价格：
            <span style="color: red">¥9.9</span>
          </div>
        </div>
      </li>

      <li class="col-12 col-xl-2">
        <img src="/images/sxdami.png" alt="" />
        <img src="/images/hide.png" class="hide" alt="" />
        <div class="goods-box">
          <div class="goods-info">
            <span>
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="16"
                height="16"
                fill="currentColor"
                class="bi bi-cart3"
                viewBox="1 1 16 16">
                <path
                  d="M0 1.5A.5.5 0 0 1 .5 1H2a.5.5 0 0 1 .485.379L2.89 3H14.5a.5.5 0 0 1 .49.598l-1 5a.5.5 0 0 1-.465.401l-9.397.472L4.415 11H13a.5.5 0 0 1 0 1H4a.5.5 0 0 1-.491-.408L2.01 3.607 1.61 2H.5a.5.5 0 0 1-.5-.5zM3.102 4l.84 4.479 9.144-.459L13.89 4H3.102zM5 12a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm7 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm-7 1a1 1 0 1 1 0 2 1 1 0 0 1 0-2zm7 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2z" />
              </svg>
              寿州大米
            </span>
            <button>查看详情</button>
          </div>
          <div class="price">市场价：¥19.9</div>
          <div>
            价格：
            <span style="color: red">¥9.9</span>
          </div>
        </div>
      </li>

      <!-- 此div是用来换行用的 -->
      <div class="w-100"></div>

      <li class="col-12 col-xl-2">
        <img src="/images/sxmianye.png" alt="" />
        <img src="/images/hide.png" class="hide" alt="" />
        <div class="goods-box">
          <div class="goods-info">
            <span>
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="16"
                height="16"
                fill="currentColor"
                class="bi bi-cart3"
                viewBox="1 1 16 16">
                <path
                  d="M0 1.5A.5.5 0 0 1 .5 1H2a.5.5 0 0 1 .485.379L2.89 3H14.5a.5.5 0 0 1 .49.598l-1 5a.5.5 0 0 1-.465.401l-9.397.472L4.415 11H13a.5.5 0 0 1 0 1H4a.5.5 0 0 1-.491-.408L2.01 3.607 1.61 2H.5a.5.5 0 0 1-.5-.5zM3.102 4l.84 4.479 9.144-.459L13.89 4H3.102zM5 12a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm7 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm-7 1a1 1 0 1 1 0 2 1 1 0 0 1 0-2zm7 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2z" />
              </svg>
              寿州大米
            </span>
            <button>查看详情</button>
          </div>
          <div class="price">市场价：¥19.9</div>
          <div>
            价格：
            <span style="color: red">¥9.9</span>
          </div>
        </div>
      </li>

      <li class="col-12 col-xl-2">
        <img src="/images/sxmianye.png" alt="" />
        <img src="/images/hide.png" class="hide" alt="" />
        <div class="goods-box">
          <div class="goods-info">
            <span>
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="16"
                height="16"
                fill="currentColor"
                class="bi bi-cart3"
                viewBox="1 1 16 16">
                <path
                  d="M0 1.5A.5.5 0 0 1 .5 1H2a.5.5 0 0 1 .485.379L2.89 3H14.5a.5.5 0 0 1 .49.598l-1 5a.5.5 0 0 1-.465.401l-9.397.472L4.415 11H13a.5.5 0 0 1 0 1H4a.5.5 0 0 1-.491-.408L2.01 3.607 1.61 2H.5a.5.5 0 0 1-.5-.5zM3.102 4l.84 4.479 9.144-.459L13.89 4H3.102zM5 12a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm7 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm-7 1a1 1 0 1 1 0 2 1 1 0 0 1 0-2zm7 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2z" />
              </svg>
              寿州大米
            </span>
            <button>查看详情</button>
          </div>
          <div class="price">市场价：¥19.9</div>
          <div>
            价格：
            <span style="color: red">¥9.9</span>
          </div>
        </div>
      </li>

      <li class="col-12 col-xl-2">
        <img src="/images/sxmianye.png" alt="" />
        <img src="/images/hide.png" class="hide" alt="" />
        <div class="goods-box">
          <div class="goods-info">
            <span>
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="16"
                height="16"
                fill="currentColor"
                class="bi bi-cart3"
                viewBox="1 1 16 16">
                <path
                  d="M0 1.5A.5.5 0 0 1 .5 1H2a.5.5 0 0 1 .485.379L2.89 3H14.5a.5.5 0 0 1 .49.598l-1 5a.5.5 0 0 1-.465.401l-9.397.472L4.415 11H13a.5.5 0 0 1 0 1H4a.5.5 0 0 1-.491-.408L2.01 3.607 1.61 2H.5a.5.5 0 0 1-.5-.5zM3.102 4l.84 4.479 9.144-.459L13.89 4H3.102zM5 12a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm7 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm-7 1a1 1 0 1 1 0 2 1 1 0 0 1 0-2zm7 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2z" />
              </svg>
              寿州大米
            </span>
            <button>查看详情</button>
          </div>
          <div class="price">市场价：¥19.9</div>
          <div>
            价格：
            <span style="color: red">¥9.9</span>
          </div>
        </div>
      </li>

      <li class="col-12 col-xl-2">
        <img src="/images/sxmianye.png" alt="" />
        <img src="/images/hide.png" class="hide" alt="" />
        <div class="goods-box">
          <div class="goods-info">
            <span>
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="16"
                height="16"
                fill="currentColor"
                class="bi bi-cart3"
                viewBox="1 1 16 16">
                <path
                  d="M0 1.5A.5.5 0 0 1 .5 1H2a.5.5 0 0 1 .485.379L2.89 3H14.5a.5.5 0 0 1 .49.598l-1 5a.5.5 0 0 1-.465.401l-9.397.472L4.415 11H13a.5.5 0 0 1 0 1H4a.5.5 0 0 1-.491-.408L2.01 3.607 1.61 2H.5a.5.5 0 0 1-.5-.5zM3.102 4l.84 4.479 9.144-.459L13.89 4H3.102zM5 12a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm7 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm-7 1a1 1 0 1 1 0 2 1 1 0 0 1 0-2zm7 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2z" />
              </svg>
              寿州大米
            </span>
            <button>查看详情</button>
          </div>
          <div class="price">市场价：¥19.9</div>
          <div>
            价格：
            <span style="color: red">¥9.9</span>
          </div>
        </div>
      </li>
    </ul>
    <hr />
  </div>
  <!-- </div> -->
</template>

<script>
  export default {};
</script>

<style lang="scss" scoped>
  .box {
    .top-title {
      padding: 20px;
      display: flex;
      margin: 0 0 20px;
      h2 {
        font-weight: bold;
        padding-left: 10px;
        border-left: 5px solid green;
      }
      p {
        margin: 10px 0 0 50px;
      }
    }
    .ul-box {
      padding: 0;
      margin: 0;
      display: flex;
      // justify-content: space-around;
      // flex-wrap: wrap;

      li {
        // margin: 0 10px;
        width: 275px;

        cursor: pointer;
        box-shadow: 0 0 2px rgba(41, 40, 40, 0.9);
        position: relative;
        margin-bottom: 30px;
        padding: 0;
        img {
          width: 100%;
          height: 260px;
        }
        .hide {
          position: absolute;
          bottom: 105px;
          left: 0;
          display: none;
        }
        &:hover {
          .hide {
            display: block;
          }
        }
        // &:hover::before {
        //   content: "";
        //   position: absolute;
        //   display: block;
        //   bottom: 105px;
        //   left: 0;
        //   width: 100%;
        //   height: 259px;
        //   //   color: rgba(182, 223, 153, 0.9);
        //   background: rgba(182, 223, 153, 0.3);
        //   z-index: 100;
        // }
        list-style: none;
        .goods-box {
          padding: 10px;
          .goods-info {
            display: flex;
            justify-content: space-between;
            align-items: center;
            button {
              border: none;
              color: white;
              background: rgb(22, 233, 50);
            }
          }
          .price {
            margin: 5px 0;
          }
        }
      }
    }
  }
</style>
